<template>
    <div>
        <nav-bar>
            <div class="backImg" slot="left" @click="backRoute">
                <img src="~assets/img/common/back.svg"  alt="">
            </div>
            <div slot="center" class="title">
                <div 
                class="title-item"
                :class="{isActive:key == currentKey}" 
                v-for="(item,key) in titles" 
                :key="key"
                @click="clickTitleItem(key)" 
                >
                    {{item}}
                </div>
            </div>
        </nav-bar>
    </div>
</template>

<script>
    import NavBar from 'components/common/navbar/NavBar.vue'
    
    export default {
        data () {
            return {
                titles:['商品','参数','评论','推荐'],
                currentKey:0
            }
        },
        components:{
            NavBar
        },
        methods:{
            clickTitleItem(key){
                this.currentKey=key
                this.$emit("clickTile",this.currentKey)
            },
            backRoute(){
                this.$router.go(-1)
            }
        }   
    }
</script>

<style scoped>
    .title{
        display: flex;
    }
    .title-item{
        flex: 1;
        font-size: var(--font-size)
    }
    .isActive{
        color: var(--color-high-text)
    }
    .backImg img{
        /* height: 100%; */
        margin-top: 11px
    }
</style>